<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>应用DOM的onclick事件和parentNode属性设计折叠与展开网页内容的特效</title>
<link media="all" href="css/rank.css" type="text/css" rel="stylesheet" />
<style>
.rankSB-cate .expA DL DD {
  display: block; float: none; width: 155px
}
.rankSB-cate .expA .dlA-hide DD {
  display: none
}
.rankSB-cate .dlA .btn {
  background: url(../images/rank.png) no-repeat
}
.rankSB-cate .dlA .btn {
  background-position: -253px -50px;
  display: inline-block;
  padding-left: 10px;
  font-weight: normal;
  float: right
}
.rankSB-cate .dlA .btn-hide {
  background-position: -253px -65px
}
</style>
</head>

<body>

<div class="sidebar"><!--左栏按属性项目排行菜单-->
  <div class="modBrandOut mb10 rankSB-cate">
    <div class="modBrand">
    <div class="thA"><span class="mark">笔记本排行榜</span></div>
      <div class="tbA">
        <div class="expA">
          <dl class="dlA clearfix">
            <dt><i>关注最高</i>
                <a class="btn" href="javascript://" name="jHide">收起</a>
            </dt>
            <dd><a href="">热门笔记本电脑排行</a> </dd>
            <dd><a href="">笔记本电脑品牌排行</a></dd>
            <dd><a href="">热门笔记本电脑系列排行</a></dd>
            <dd><a href="">上升最快笔记本电脑排行</a></dd>
          </dl>
          <dl class="dlA clearfix">
            <dt><i>热门品牌</i>
                <a class="btn" href="javascript://" name="jHide">收起</a>
            </dt>
            <dd><a href="">联想笔记本电脑排行</a></dd>
            <dd><a href="">华硕笔记本电脑排行</a></dd>
            <dd><a href="">戴尔笔记本电脑排行</a></dd>
          </dl>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
(function(){
  var hides=document.getElementsByName("jHide");
  for(var i=0;i<hides.length;i++)
	{
	  hides[i].onclick=function()
	  {
		var box=this.parentNode.parentNode;
		if(box.className.indexOf("dlA-hide")<0){
		  box.className+=" dlA-hide";
		  this.innerHTML="展开"	}
		 else {
		  box.className=box.className.replace(/dlA-hide/," ");
		  this.innerHTML="收起"	}
	  };
   };
})();
</script>

</body>
</html>
